<template>
  <div class="home">
    <el-container>
      <el-header height="64px;">
        <div style="width: 1200px;margin: 0 auto;">
          <el-row :gutter="20">
            <el-col :span="4">
              <a href="javascript:void(0)">
                <img src="/images/logo渐变深蓝.png" width="180px">
              </a>
            </el-col>
            <el-col :span="2">
              <!--              <el-button style="font-size: 20px;position: relative;-->
              <!--top: -5px;border:none;">-->
              <a href="javascript:void(0)">
                <p class="el-icon-location" style="padding-top: 23px;box-sizing: border-box;font-size: 15px">
                  <span style="color: #000000DB">贵阳</span>
                </p>
              </a>
              <!--              </el-button>-->
            </el-col>
            <el-col :span="14">
              <el-menu class="el_b"
                       mode="horizontal"
                       active-text-color="#0092FF"
                       default-active="1"
                       background-color="rgba(0,0,0,0)"
                       text-color="#000000">
                <el-menu-item @click="locationUrl('index')" index="1">首页</el-menu-item>
                <el-menu-item @click="locationUrl('lookWork')" index="2">找活干</el-menu-item>
                <el-menu-item @click="locationUrl('workers')" index="3">招工人</el-menu-item>
                <el-menu-item @click="locationUrl('lookWork')" index="4">工厂专区</el-menu-item>
                <el-menu-item @click="locationUrl('lookWork')" index="5">物流专区</el-menu-item>
                <el-menu-item @click="locationUrl('member')" index="6">会员中心</el-menu-item>
              </el-menu>
            </el-col>


            <el-col :span="4">
              <div style="float: right;line-height: 64px" v-if="user==null">
                <el-link :underline="false" @click="locationUrl('reg')" target="_blank">注册</el-link>
                <span style="color: rgba(0,0,0,0.2);margin: 0px 10px">|</span>
                <el-link :underline="false" @click="locationUrl('login')" target="_blank">登录</el-link>
              </div>
              <div style="float: right;line-height: 64px;margin-top: 10px" v-else>
                <el-popconfirm
                    @confirm="outgin"
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确认要退出登录吗？">
                  <button style="margin-right: 20px;width: 50px;height: 50px;border: none;border-radius: 50px;
                  overflow: hidden;
                  background-color: rgba(0,0,0,0);position: relative;top: -1px;left: -1px;"
                          slot="reference">
                      <el-avatar style="display: block;vertical-align: top;" :src="'http://localhost:29000'+this.user.imgUrl" class="my_img">
                      </el-avatar>
                  </button>
                </el-popconfirm>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer style="background-color:white;height:280px;padding: 50px 0">
        <div style="width: 1200px;margin: 0 auto;
        text-align: center;color: #666">
          <el-row>
            <el-col :span="8">
              <img src="/images/logo渐变深蓝.png" width="150px">
              <p></p>
              <p style="font-size: 8px">电话----------------</p>
              <p style="font-size: 8px">地址：--------------</p>
              <p style="font-size: 8px">网址：--------------</p>
            </el-col>
            <el-col :span="8">
              <el-row id="footer_center">
                <el-col :span="8">
                  <p style="margin-top: 10px">关于泡泡</p>
                  <p style="margin-top: 20px">网站地图</p>
                  <p style="margin-top: 20px">邀请工友</p>
                </el-col>
                <el-col :span="8">
                  <p style="margin-top: 10px">二手交易</p>
                  <p style="margin-top: 20px">水印相机</p>
                  <p style="margin-top: 20px">工地考勤</p>
                </el-col>
                <el-col :span="8">
                  <p style="margin-top: 10px">工地记工</p>
                  <p style="margin-top: 20px">泡泡机械</p>
                  <p style="margin-top: 20px">务工保险</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <div style="display: flex">
                <div>
                  <img style="height: 80px;margin-top: 10px;margin-left: 80px" src="/images/ewm.png">
                  <p style="margin-left: 80px">扫码关注</p>
                </div>
                <div>
                  <img style="height: 80px;margin-top: 10px;margin-left: 20px" src="/images/ewm.png">
                  <p style="margin-left: 25px">扫码下载App</p>
                </div>
                <div>
                  <img style="height: 80px;margin-top: 10px;margin-left: 20px" src="/images/ewm.png">
                  <p style="margin-left: 20px">联系我们</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="color: #b1b1b1;text-align: center;padding: 50px 0">
          <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      showLoginDialog: false, // 控制登录框的显示与隐藏
      showRegisterDialog: false, // 控制注册框的显示与隐藏
      loginData: {
        username: '',
        password: ''
      },
      registerData: {
        username: '',
        password: ''
      },
    };
  },
  methods: {

    locationUrl(url) {
      this.$router.push('/' + url);
    },
    outgin() {
      let loginInfo = localStorage.getItem("user");
      let loginObject = JSON.parse(loginInfo);
      let jwt = loginObject.token;
      this.axios
          .create({
            'headers': {
              'Authorization': jwt
            }
          })
          .post('http://localhost:37000/v1/users/logout').then((response) => {
        if (response.data.code == 20000) {
          localStorage.removeItem("user");
          this.$message.success("走你！");
          location.href = '/index';
        } else {
          localStorage.removeItem("user");
          this.$message.error(response.data.message);
        }
      })
    },
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem("user"));
  },
};
</script>

<style scoped>


/deep/ .el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0) !important;
}

.el-icon-location {
  color: #0092FF;
}

.home {
  display: block;
}

#a_div > a {
  text-decoration: none;
  color: #000000;
}

.el_b {
  font-weight: bold;
}

#footer_center {
  display: flex;
}

</style>

<!--
  需要执行的命令
  npm install vanta@0.5.24
  npm install three@0.121.0

  npm install vue-quill-editor

  百度地图依赖插件
  npm i --save vue-baidu-map  ||   npm install vue-baidu-map --save
-->
